<template>
  <div class="student">
    <div class="search-box">
      <span>学号/姓名：</span>
      <a-input v-model="keyWord" style="width: 200px" placeholder="请输入关键词"></a-input>
      <span>学院：</span>
      <a-input v-model="college" style="width: 250px" placeholder="请输入学院"></a-input>
      <a-button type="primary" style="margin-left: 20px" @click="search">查询</a-button>
    </div>
    <a-table
      :columns="columns"
      :data-source="dataSource"
      :row-key="(record) => record['学号']"
      :scroll-y="true"
      :pagination="false"
      :loading="loading"
      class="table"
    >
      <template slot="operation" slot-scope="text, record">
        <a-switch :checked="Boolean(text)" @change="onChange(record)"/>
      </template>
    </a-table>
    <a-pagination
      show-size-changer
      :total="Number(pagination.total)"
      :page-size="Number(pagination.pageSize)"
      @change="pageChange"
      :show-total="() => `共 ${this.pagination.total} 条数据`"
      @showSizeChange="onShowSizeChange"
      style="margin-top: 20px; text-align: end;"
    ></a-pagination>
  </div>
</template>

<script>
export default {
  data () {
    return {
      college: '',
      keyWord: '',
      loading: false,
      columns: [
        {
          dataIndex: '学号',
          key: '学号',
          title: '学号'
        },
        {
          dataIndex: '姓名',
          key: '姓名',
          title: '姓名'
        },
        {
          dataIndex: '学院',
          key: '学院',
          title: '学院'
        },
        {
          dataIndex: '专业',
          key: '专业',
          title: '专业'
        },
        {
          dataIndex: '省份',
          key: '省份',
          title: '省份'
        },
        {
          dataIndex: 'isdao',
          key: 'isdao',
          scopedSlots: { customRender: 'operation' },
          title: '是否报道'
        },
        {
          dataIndex: 'createTime',
          key: 'createTime',
          title: '报道时间'
        }
      ],
      dataSource: [],
      pagination: {
        pageSize: 10,
        current: 1,
        total: 0,
        showTotal: () => `共 ${this.pagination.total} 条数据`
      }
    }
  },
  mounted () {
    this.fetchData()
  },
  methods: {
    onChange (record) {
      console.log(record)
      const studentNo = record['学号']
      const apiType = record.isdao ? 'notSure' : 'sure'
      this.$api.report[apiType]({ stuNo: studentNo }).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.$message.success('修改成功！')
        } else {
          this.$message.error(res.userMsg)
        }
      }).catch(err => {
        this.$message.error(err)
      }).finally(() => {
        this.fetchData()
      })
    },
    fetchData () {
      const params = {
        college: this.college,
        keyWord: this.keyWord,
        pageSize: this.pagination.pageSize,
        pageNo: this.pagination.current
      }
      this.loading = true
      this.$api.report.findStudent(params).then(res => {
        if (res.code === 0) {
          this.dataSource = res.data.records
          this.pagination.total = res.data.total
          this.pagination.pageSize = res.data.pageSize
          this.pagination.current = res.data.pageNo
        }
      }).catch(err => {
        this.$message.error(err)
      }).finally(() => {
        this.loading = false
      })
    },
    search () {
      this.fetchData()
    },
    pageChange (current) {
      this.pagination.current = current
      this.fetchData()
    },
    onShowSizeChange (_, pageSize) {
      this.pagination.pageSize = pageSize
      this.fetchData()
    }
  }
}
</script>

<style scoped>
  .student .search-box {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .student .search-box span {
    margin: 0 15px;
  }

  .table {
    overflow-y: scroll;
    max-height: 57vh;
  }
</style>
